<div class="form-group clearfix">
    <div class="pull-left form-inline">
        <button type="button" class="btn btn-default" (click)="addModal.show();">新建权限</button>
    </div>
</div>

<div>
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>序号</th>
            <th>权限名称</th>
            <th>权限</th>
            <th>模型</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of permissionList.list">
            <th>{{item.id}}</th>
            <th>{{item.orderby}}</th>
            <th>{{item.name}}</th>
            <th>{{item.slug}}</th>
            <th>{{item.model}}</th>
            <th>{{item.created_at}}</th>
            <th>{{item.updated_at}}</th>
            <td>
                <a href="javascript:;" (click)="editModal.show();getPermissionInfo(item.id)">修改</a>-
                <a href="javascript:;" (click)="delPermission(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="text-center">
        <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                    [(ngModel)]="currentPage"
                    previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                    [boundaryLinks]="true" class="pagination-sm"></pagination>
    </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="promptIsShow($event)"></app-notification>

<!-- 添加权限 -->
<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">新建权限</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form #addPermissionForm = "ngForm" (ngSubmit) = "addPermissionSubmit()">
                    <div class="form-group clearfix">
                        <label class="col-md-2">权限名称</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="name" [(ngModel)]="addPermission.name" name="name" required>
                            <div [hidden]="addPermissionForm.controls.name?.valid || addPermissionForm.controls.name?.pristine" class="alert alert-danger">
                                <p *ngIf="addPermissionForm.controls.name?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">权限</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="slug" [(ngModel)]="addPermission.slug" name="slug" required>
                            <div [hidden]="addPermissionForm.controls.slug?.valid || addPermissionForm.controls.slug?.pristine" class="alert alert-danger">
                                <p *ngIf="addPermissionForm.controls.slug?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色描述</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="description" [(ngModel)]="addPermission.description" name="description">
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">模型</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="model" [(ngModel)]="addPermission.model" name="model">
                            <div [hidden]="addPermissionForm.controls.model?.valid || addPermissionForm.controls.model?.pristine" class="alert alert-danger">
                                <p *ngIf="addPermissionForm.controls.model?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">序号</label>
                        <div class="col-md-6">
                            <input type="number" class="form-control" id="orderby" [(ngModel)]="addPermission.orderby" name="orderby" [min]="1" [step]="1">
                            <div [hidden]="addPermissionForm.controls.orderby?.valid || addPermissionForm.controls.orderby?.pristine" class="alert alert-danger">
                                <p *ngIf="addPermissionForm.controls.orderby?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt20">
                        <button class="btn btn-default btn-md-long" type="button" (click)="addModal.hide()">取消</button>
                        <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addPermissionForm.form.valid">提　交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改角色 -->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">修改权限</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form #editPermissionForm = "ngForm" (ngSubmit) = "editPermissionSubmit()">
                    <div class="form-group clearfix">
                        <label class="col-md-2">权限名称</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="name" [(ngModel)]="permissionInfo.name" name="name" required>
                            <div [hidden]="editPermissionForm.controls.name?.valid || editPermissionForm.controls.name?.pristine" class="alert alert-danger">
                                <p *ngIf="editPermissionForm.controls.name?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">权限</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="slug" [(ngModel)]="permissionInfo.slug" name="slug" required>
                            <div [hidden]="editPermissionForm.controls.slug?.valid || editPermissionForm.controls.slug?.pristine" class="alert alert-danger">
                                <p *ngIf="editPermissionForm.controls.slug?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色描述</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="description" [(ngModel)]="permissionInfo.description" name="description">
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">模型</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="model" [(ngModel)]="permissionInfo.model" name="model">
                            <div [hidden]="editPermissionForm.controls.model?.valid || editPermissionForm.controls.model?.pristine" class="alert alert-danger">
                                <p *ngIf="editPermissionForm.controls.model?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">序号</label>
                        <div class="col-md-6">
                            <input type="number" class="form-control" id="orderby" [(ngModel)]="permissionInfo.orderby" name="orderby" [min]="1" [step]="1">
                            <div [hidden]="editPermissionForm.controls.orderby?.valid || editPermissionForm.controls.orderby?.pristine" class="alert alert-danger">
                                <p *ngIf="editPermissionForm.controls.orderby?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt20">
                        <button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取消</button>
                        <button class="btn btn-success btn-md-long" type="submit" [disabled]="!editPermissionForm.form.valid">提　交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>